<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap 模板</title>
	  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" charset="UTF-8" >
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
      <script src="bootstrap/js/jquery-1.11.1.min.js"></script>
      <script src="bootstrap/js/bootstrap.min.js"></script>
      <script src="bootstrap/js/jquery.easing.1.3.js"></script>
      <script src="bootstrap/js/jquery.easing.compatibility.js"></script>
      <!--[if lt IE 9]>
         <script src="js/html5shiv.js"></script>
         <script src="js/respond.min.js"></script>
      <![endif]-->
   </head>
   <script>
   	$(function(){
   		$('button').click(function(){
   			
   			 jQuery.easing.def = 'easeInElastic';//可设置默认样式
   			
		 	 $('div').stop(true).animate({'width':$('div').width()==1000?200:1000},1000,function(){
		 	 	alert('---OK,加载完成---');
		 	 });
		 	 
		 	 
   			// $('div').fadeTo(2000,0.2);//逐渐变成很淡的透明度
   			// $('div').fadeOut(200);//开始显示  逐渐淡出
   			// $('div').fadeIn(200);//开始隐藏 逐渐淡入
   			
   			// $('div').slideToggle(200);//切换上收和下拉
   			// $('div').slideUp(200);//开始时展示的，点击上收
   			// $('div').slideDown(200);//开始是隐藏的  点击然后下拉
   			
   			// $('div').toggle(200);//切换  展示和隐藏
   			// $('div').show(200);//用两百毫秒的时间展示
   			// $('div').hide(200);//用两百毫秒的时间隐藏
   			
  // $('div').stop(true).animate({'width':$('div').width()==1000?200:1000},1000);//是一千就变成两百，不是一千就变成一千,stop(true)可以禁用(全部禁用)
   			
   			 // $('div').animate({'height':'1000'},1000)
   			 // .delay(100)//延迟多少秒在切换下一个样式
   			 // .animate({'width':'1000'},2000);//先变高度，再变宽度
   			 
   			 //$('div').css('width','1000');//css的样式		
   		});
   	});
   </script>
   <style>
   
   body{padding-top: 40px}
   div{height: 100px;width: 100px;background:#87EA2D;display:block}
   </style>
   <body>
   	<button class="btn btn-primary">开始</button>
   	<hr/>
   	<div></div>
   </body>
</html>